<template>
  <div style="padding:0px 10px;">
    <Row type="flex" justify="center" :gutter="20">
      <i-col :span="16">
        <Row style="margin: 20px 10px auto 10px;">
          <Card class="player-card" :bordered="false">
            <p slot="title" @dblclick="gobackVideoGridPages">{{videoTitle}}</p>

            <Button slot="extra" type="primary" shape="circle" size="large" style="margin-right:20px;font-size:18px;" @click="gobackVideoGridPages">
              <Icon type="ios-arrow-back" size="22"></Icon>
              返回
            </Button>

            <Button slot="extra" type="success" shape="circle" size="large" style="margin-right:20px;font-size:18px;" @click="reloadVideoStreamUrl">
              <Icon type="md-refresh" size="22" />
              刷新
            </Button>

            <RadioGroup slot="extra" v-model="switchWay" type="button">
              <Radio label="线路一" style="background-color:rgba(0,0,0,0);height:30px;font-size:18px;color:#595959;border-color:#595959;font-weight:bold;"></Radio>
              <Radio label="线路二" style="background-color:rgba(0,0,0,0);height:30px;font-size:18px;font-weight:bold;"></Radio>
            </RadioGroup>

            <div class="vidplayer">
              <flv-video-player v-if="switchWay === '线路一' && isUpdate" :videoSrc="flvVideoSrc"></flv-video-player>
              <rtmp-player v-else :src="rtmpVideoSrc"></rtmp-player>
            </div>

          </Card>
        </Row>
      </i-col>
      <i-col :span="8">
        <Row style="margin-top:20px;">
          <data-statistics v-if="showConfig.isShowDataAnalysis"></data-statistics>
        </Row>
        <Row style="margin-top:0px;">
          <monitor-events-table
            :tableData="monitorEventsTableListData"
            :tableHeight="showConfig.tableHeight">
          </monitor-events-table>
        </Row>
      </i-col>
    </Row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import FlvVideoPlayer from './flvVideoPlayer'
import RtmpPlayer from "./rtmpPlayer";

import DataStatistics from './dataStatistics'
import MonitorEventsTable from "./monitorEventsTable";

import {mapState, mapGetters, mapActions} from 'vuex'
var node_schedule = require("node-schedule");

export default {
  components: {
    FlvVideoPlayer,
    RtmpPlayer,
    DataStatistics,
    MonitorEventsTable
  },
  data () {
    return {
      switchWay: '线路一',
      isUpdate: true
    }
  },
  computed: {
    ...mapState([
      'monitorData',
      'stationVideoStreamUrl',
      'monitorEventsTableListData'
    ]),
    ...mapGetters([
      'dayWeekMonthStartEndTime',
    ]),
    // 显示配置
    showConfig() {
      console.log('this.monitorData.reqPlayerInfo.category', this.monitorData.reqPlayerInfo.category)
      let showCategory = this.monitorData.reqPlayerInfo.category
      if(showCategory === "switching_room") {
        return {
          isShowDataAnalysis: false,
          tableHeight: '750'
        }
      } else if (showCategory === "safebox") {
        return {
          isShowDataAnalysis: true,
          tableHeight: '650'
        }
      } else if (showCategory === "overview" || showCategory === "refuel_side") {
        return {
          isShowDataAnalysis: true,
          tableHeight: '450'
        }
      } else if (showCategory === "unload") {
        return {
          isShowDataAnalysis: true,
          tableHeight: '700'
        }
      } else {
        return {
          isShowDataAnalysis: true,
          tableHeight: '390'
        }
      }
    },
    rtmpVideoSrc() {
      console.log('rtmp视频信息：', this.monitorData)
      return this.monitorData.reqPlayerInfo.streamUrl
    },
    flvVideoSrc() {
      console.log('flv视频信息：', this.monitorData)
      return this.monitorData.reqPlayerInfo.httpflvUrl
    },
    videoTitle() {
      return this.monitorData.reqPlayerInfo.title
    }
  },
  created () {
    this.getMonitorEventsTableListData()
  },
  mounted() {
    var intervalRightStation = node_schedule.scheduleJob("*/5 * * * * *",() => {
        console.log("实时监控页面实时获取 -------------> 报警事件数据!")
        this.getMonitorEventsTableListData()
      }
    )
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      console.log("取消 实时监控页面实时获取 -------------> 报警事件数据");
      intervalRightStation.cancel();
    })
  },
  methods: {
    ...mapActions([
      'getMonitorEventsTableList',
      'closeDetailsLoadVideoGridPages',
      'onloadVideoStreamPlayer'
    ]),
    gobackVideoGridPages() {
      this.closeDetailsLoadVideoGridPages()
    },
    // 播放10分钟后会断流，需要刷新视频流，重新加载视频流
    reloadVideoStreamUrl() {
      let pullParams = {
        station: this.monitorData.station,
        channel: this.monitorData.reqPlayerInfo.channel + '@remote'
      }
      console.log('刷新 视频流页面：', this.monitorData, pullParams)

      this.onloadVideoStreamPlayer(pullParams)
      this.isUpdate = false
      setTimeout(()=>this.isUpdate = true, 100)
    },
    getMonitorEventsTableListData() {
      // 如果是 超市大门，右侧数据显示收银台的数据
      if(this.monitorData.reqPlayerInfo.category === 'gate'){
        let checkoutChannel = this.stationVideoStreamUrl.find((ele)=>ele.category === 'checkout')
        console.log('checkoutChannel', checkoutChannel)
        let eventsParams = {
          start_time: this.dayWeekMonthStartEndTime.monthStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayRealTime,
          station: this.monitorData.reqPlayerInfo.station,
          channel: checkoutChannel.channel,
          page_index: 1,
          page_size: 100
        }
        this.getMonitorEventsTableList(eventsParams)
      } else if(this.monitorData.reqPlayerInfo.category === 'overview'){

        let eventsParams = {
          start_time: this.dayWeekMonthStartEndTime.monthStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayRealTime,
          station: this.monitorData.reqPlayerInfo.station,
          category: 'refuel_side',
          page_index: 1,
          page_size: 100
        }
        this.getMonitorEventsTableList(eventsParams)
      } else {
        let eventsParams = {
          start_time: this.dayWeekMonthStartEndTime.monthStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayRealTime,
          station: this.monitorData.reqPlayerInfo.station,
          channel: this.monitorData.reqPlayerInfo.channel,
          page_index: 1,
          page_size: 100
        }
        this.getMonitorEventsTableList(eventsParams)
      }
    }
  }
}
</script>

<style lang="less">
.vidplayer {
  height: 100%;
  width: 100%;
}
.player-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 60px;
}
.player-card .ivu-card-head p {
  font-size: 3rem;
  height: 60px;
  line-height: 60px;
  color: #fff;
  text-align: left;
}
.player-card .ivu-card-body {
  padding: 3px;
  background-color: #13a4c2;
}
.player-card .ivu-radio-wrapper-checked {
  border-color: #fff !important;
  color: #fff !important;
}
// .player-card .ivu-radio-wrapper {
//   border-color: #515a6e !important;
//   color: #515a6e !important;
// }
</style>


